<template>
  <div class="resident-management-container">
    <!-- 使用卡片组件包裹主要内容 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>居民管理</span>
      </div>

      <!-- 筛选/搜索区域 -->
      <div class="filter-container">
        <el-form :inline="true" :model="filters" class="demo-form-inline">
          <el-form-item label="签约状态:">
            <el-select v-model="filters.status" placeholder="请选择签约状态">
              <el-option label="待支付" value="pending_payment"></el-option>
              <el-option label="已签约" value="signed"></el-option>
              <el-option label="已过期" value="expired"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="签约机构:">
            <el-input v-model="filters.institution" placeholder="请输入签约机构"></el-input>
          </el-form-item>

          <el-form-item label="医生团队:">
            <el-select v-model="filters.team" placeholder="请选择医生团队">
              <el-option label="王小博医生团队" value="team_wang"></el-option>
              <el-option label="李医生团队" value="team_li"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务包:">
            <el-select v-model="filters.servicePackage" placeholder="请选择服务包">
              <el-option label="老年服务包" value="package_elderly"></el-option>
              <el-option label="儿童服务包" value="package_child"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="居民标签:">
            <el-select v-model="filters.tag" placeholder="请选择居民标签">
              <el-option label="高血压" value="tag_hypertension"></el-option>
              <el-option label="心脏病" value="tag_heart_disease"></el-option>
              <el-option label="何杰金" value="tag_hodgkin"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="居民名称:">
            <el-input v-model="filters.name" placeholder="请输入居民名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 操作按钮区域 -->
      <div class="action-buttons">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增居民档案</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
          :data="tableData"
          style="width: 100%; margin-top: 20px;"
          border
          v-loading="loading"
      >
        <el-table-column
            prop="id"
            label="居民编号"
            width="100"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="idCard"
            label="身份证号"
            width="200"
            align="center">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号码"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="status"
            label="签约状态"
            width="120"
            align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '待支付' ? '' : 'success'" disable-transitions>
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="用户标签"
            align="center">
          <template slot-scope="scope">
            <el-tag
                v-for="tag in scope.row.tags"
                :key="tag"
                class="user-tag">
              {{ tag }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="200"
            align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑详情</el-button>
            <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)" style="color: #F56C6C;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ResidentManagement',
  data() {
    return {
      // 筛选表单的数据
      filters: {
        status: 'pending_payment',
        institution: '北京市怀柔区洛西社区卫生',
        team: 'team_wang',
        servicePackage: 'package_elderly',
        tag: 'tag_hypertension',
        name: ''
      },
      // 表格加载状态
      loading: false,
      // 表格数据
      tableData: [
        {
          id: 2,
          name: '刘备',
          idCard: '33398719991010124567',
          phone: '13522223333',
          status: '待支付',
          tags: ['高血压', '心脏病', '何杰金']
        },
        {
          id: 3,
          name: '关羽',
          idCard: '445281198805054321',
          phone: '13800138000',
          status: '已签约',
          tags: ['高血压']
        },
        {
          id: 4,
          name: '张飞',
          idCard: '510212199501208888',
          phone: '13912345678',
          status: '已签约',
          tags: ['心脏病']
        }
      ]
    };
  },
  methods: {
    // 处理搜索
    handleSearch() {
      console.log('正在搜索:', this.filters);
      this.loading = true;
      // 模拟API调用
      setTimeout(() => {
        this.loading = false;
        this.$message({
          message: '查询成功！',
          type: 'success'
        });
      }, 1000);
    },
    // 重置搜索条件
    resetSearch() {
      this.filters = {
        status: '',
        institution: '',
        team: '',
        servicePackage: '',
        tag: '',
        name: ''
      }
      this.$message({
        message: '搜索条件已重置',
        type: 'info'
      });
    },
    // 新增居民
    handleAdd() {
      console.log('触发新增居民操作');
      this.$message.info('正在打开新增居民对话框...');
    },
    // 编辑
    handleEdit(row) {
      console.log('编辑:', row);
      this.$message.info(`正在编辑居民: ${row.name}`);
    },
    // 查看
    handleView(row) {
      console.log('查看:', row);
      this.$message.info(`正在查看居民: ${row.name}`);
    },
    // 删除
    handleDelete(row) {
      console.log('删除:', row);
      this.$confirm(`此操作将永久删除居民 "${row.name}", 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        // 在这里可以添加调用API删除数据的逻辑
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>

<style scoped>
.resident-management-container {
  padding: 20px;
}
.filter-container .el-form-item {
  margin-bottom: 10px;
}
.action-buttons{
  margin-bottom: 20px;
  text-align: right;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.user-tag {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
  margin-right: 5px;
}
</style>

